<template>
  <div class="analysis-dashboard">
    <CardList :staticData="staticData" :key="staticKey"></CardList>
    <div class="custom-card custom-card-header el-card marT20">
      <div class="header-flex">
        <div class="title">模拟考试</div>
        <!-- <div class="timeFlex">
          <div v-for="(item, index) in timeSelect" :key="index" :class="['time-tab', { active: timeIndex === index }]"
            @click="timeIndex = index">
            {{ item }}
          </div>
          <el-date-picker label="创建时间：" v-model="customRange" type="daterange" start-placeholder="开始日期"
            end-placeholder="结束日期" format="YYYY/MM/DD " date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
            @change="onCustomRangeChange" class="custom-date-picker" />
        </div> -->
      </div>
      <carAnalysis :examPeopleList="examPeopleList" :examNumList="examNumList"
        v-if="examPeopleList.length && examNumList.length">
      </carAnalysis>
    </div>
    <div class="custom-card custom-card-header el-card marT20">
      <div class="title">考试记录</div>
      <dataInfo></dataInfo>
    </div>
  </div>
</template>

<script setup lang="ts">
import carAnalysis from './widget/carAnalysis.vue'
import dataInfo from './widget/dataInfo.vue'
import CardList from './widget/CardList.vue'
import { getLearningAnalysisStatic, getExamPeopleStatic, getExamNumStatic } from '@/api/questionbank'

defineOptions({ name: 'Data_analysis' })

const carModelId = ref(0)
const staticKey = ref(0)
const customRange = ref('')
const timeSelect = ref(['昨日', '近7天', '近30天'])
const timeIndex = ref(0)
const staticData = ref({})

const getBasicInfo = async () => {
  const res = await getLearningAnalysisStatic()
  if (res.code === '00000') {
    staticData.value = res.data
    staticKey.value = new Date().getDate()
  }
}

const onCustomRangeChange = (e: any) => { }

const examPeopleList = ref<any>([]) //考试人数
const getExamData = async () => {
  const res = await getExamPeopleStatic({ days: 30 })
  if (res.code === '00000') {
    examPeopleList.value = res.data
  }
}

const examNumList = ref<any>([]) //考试次数
const getExamNumData = async () => {
  const res = await getExamNumStatic({ days: 30 })
  if (res.code === '00000') {
    examNumList.value = res.data
  }
}
onMounted(() => {
  getBasicInfo();
  getExamData();
  getExamNumData();
})
</script>

<style lang="scss" scoped>
@use './style';

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeFlex {
  display: flex;
}

.time-tab {
  padding: 6px 18px;
  margin-right: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  transition: all 0.2s;
  border: 1px solid transparent;

  &.active {
    color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary);
    font-weight: 600;
  }
}

.marT20 {
  margin-top: 20px;
}
</style>
